<template>
	<div class="test-paper-detail">
		<!-- <div style="color: rgb(27, 76, 184);margin:30px;">
			<div class="addressIcon"></div>
			<span>当前位置：</span>
			<span style="cursor: pointer" @click="returnTestPaper($route.params.page)">{{ pageTitle }}</span>
			<Icon type="ios-arrow-forward" color="rgb(27, 76, 184)" size="16" />
			<span style="color: #333">{{paperName || '创建试卷'}}</span>
		</div> -->
		<div class="pageWrap" id="testPaper">
			<Row class="pageHeader">
				<h2 class="title">{{title}}</h2>
			</Row>
			<Divider />
			<Row style="padding: 0px 20px 0px 20px;" class="content">
				<Col span="1">
					<Steps :current="currStep" direction="vertical">
						<Step title="" content="" @click.native="currStep = 0"></Step>
						<Step title="" content="" @click.native="singleAddQuestion(true,testPaperType)"></Step>
					</Steps>
          
     
				</Col>
				<Col span="23" v-show="currStep == 0" class="content-col">
					<h4 style="margin-bottom:30px;">第一步 | 基础信息</h4>
					<div>
						<Form ref="paperTestformValidate" :model="paperTestformValidate" :rules="rulepaperTestValidate" :label-width="100" label-position="left"  style="width: 500px">
						<div id="formtitle">
							<FormItem label="试卷名称" prop="paperName">
								<Input v-model.trim="paperTestformValidate.paperName" placeholder='名称不能包含下列任意英文字符 \ / : * ? " < > |，名称长度为1-128个字符'></Input>
							</FormItem>
							<FormItem label="试卷难度" prop="difficulty">
								<Select filterable v-model="paperTestformValidate.difficulty" placeholder="选择难度">
									<Option value="simple">简单</Option>
									<Option value="medium">中等</Option>
									<Option value="hard">较难</Option>
								</Select>
							</FormItem>
							<FormItem label="试卷描述" prop="description">
								<Input v-model.trim="paperTestformValidate.description" type="textarea" :rows="3" placeholder="请输入试卷描述"/>
							</FormItem>
							<FormItem label="考试时长" prop="duration">
								<Input v-model="paperTestformValidate.duration" placeholder="请输入考试时长" :min="30" :max="240" number>
									<span slot="append">分钟</span>
								</Input>
							</FormItem>
							<FormItem label="进阶考试" prop="advanced">
								<RadioGroup v-model="paperTestformValidate.advanced">
									<Radio label="false" :disabled="disabledAdvancedExam">否</Radio>
									<Radio label="true" :disabled="opType == 'modify'&&paperTestformValidate.paperType == 'paper_random'">是</Radio>
								</RadioGroup>
								<span v-show="disabledAdvancedExam" style="color:#ff9900"><Icon type="ios-information-circle-outline" />包含需要环境的题型，只能设置为进阶考试</span>
							</FormItem>
							<FormItem label="试卷类型" prop="paperType">
								<RadioGroup v-model="paperTestformValidate.paperType">
									 <!-- :disabled="opType == 'modify' || paperTestformValidate.paperType == 'paper_random'" -->
									<Radio label="paper_fixed" >固定试卷</Radio>
									<Radio label="paper_reordering">变序试卷</Radio>
									<Radio label="paper_random" :disabled="disabledPaperType|| (opType == 'modify' && paperTestformValidate.paperType !== 'paper_random')">随机试卷</Radio>
								</RadioGroup>
							</FormItem>
							<FormItem label="自测" prop="type">
								<RadioGroup v-model="paperTestformValidate.type">
									<Radio label="teach" :disabled="isUsed">否</Radio>
									<Radio label="self" :disabled="(disabledChangeType||disabledPaperType)">是</Radio>
								</RadioGroup>
								<span v-show="disabledChangeType" style="color:#ff9900"><Icon type="ios-information-circle-outline" />包含问答题，不允许设置为自测试卷</span>
								<span v-show="isUsed" style="color: #ff9900"><Icon type="ios-information-circle-outline"/>已被应用于自测考试，无法修改为非自测状态</span>
							</FormItem>
							<FormItem label="可见范围" prop="visibility">
								<RadioGroup v-model="paperTestformValidate.visibility">
									<Radio label="share">单位</Radio>
									<Radio label="private">个人</Radio>
								</RadioGroup>
								<span v-if="$route.params.action == 'modify'" style="color:#f90;position:absolute;white-space: nowrap;"> <Icon type="ios-information-circle-outline" />可见范围由个人修改为单位时，试卷使用的个人资源(题目)的可见范围将变为单位</span>
							</FormItem>
							<FormItem label="组卷方式">
								<Button :type="testPaperType == 1 ? 'primary' : 'default'" :ghost="testPaperType == 1 ? true : false" style="position:relative;" @click="changePaperType(1)" v-show="paperTestformValidate.paperType != 'paper_random'">
					                	选题组卷
					                	<img :src="selected" alt="" style="position:absolute;top:-1px;right:0;" v-show="testPaperType == 1"/>
					            </Button>
								<Button :type="testPaperType == 2 ? 'primary' : 'default'" :ghost="testPaperType == 2 ? true : false" style="position:relative;" @click="changePaperType(2)" v-if="this.opType === 'create'||paperTestformValidate.paperType == 'paper_random'" :style="{ background: paperTestformValidate.paperType == 'paper_random' ? '#ccc' : '',cursor:paperTestformValidate.paperType == 'paper_random' ? 'not-allowed' : 'pointer'}">
					                	系统生成
					                	<img :src="selected" alt="" style="position:absolute;top:-1px;right:0;" v-show="testPaperType == 2|| paperTestformValidate.paperType == 'paper_random' "/>
					            </Button>
								<p style="color:#ff9900" v-if="opType == 'create'">
									<span><Icon type="ios-information-circle-outline" />切换题目添加方式将清空之前所选题目</span>
								</p>
								<p style="color:#ff9900" v-if="opType == 'create'">
									<span><Icon type="ios-information-circle-outline" />试卷可见范围为单位时，不允许选择个人题目</span>
								</p>
								<p style="color:#ff9900" v-if="opType == 'create'">
									<span><Icon type="ios-information-circle-outline" />修改其他设计师的个人试卷时，不允许选择个人题目</span>
								</p>
							</FormItem>
						</div>
						<FormItem style="margin-top:0">
							<Button type="primary" @click="singleAddQuestion(true,testPaperType)">下一步</Button>
              <Button style="margin-left: 16px;" @click="$router.push('testPaper');">返回列表页</Button>
              
							<!--<Button type="primary" ghost>重置</Button>-->
						</FormItem>
					</Form>
					</div>
				</Col>
				<Col span="23" v-show="currStep == 1 && testPaperType == 1">
					<Row style="display: flex;">
						<h4 style="margin-bottom:30px;float:left;">
								第二步 | 手动生成题目
							</h4>
						<div style="margin-left: auto;">
              <Button style="margin-right: 16px;" @click="$router.push('testPaper');">返回列表页</Button>
							<Button type="primary" @click="savePaperTest('paperTestformValidate')" :loading="saveLoading">完成</Button>
              
							<!--<Button type="primary" ghost>重置</Button>-->
						</div>
					</Row>
					<PaperManuallyGenerated 
						v-if="singleAdd"
						ref="paperManuallyGenerated"
						:selectQuestionList="paperQuestionList"
						:paperVisibility="paperTestformValidate.visibility"
						:isAdvancedExam="paperTestformValidate.advanced"
						:paperCreator="paperTestformValidate.creator"
						:isOwn="isOwn"
						:isSelfTest="paperTestformValidate.type === 'self'"
						@change-type="changeType"
						@has-evn="hasEnv"
						@on-change="getSelectQuestion">
					</PaperManuallyGenerated>
				</Col>
				<Col span="23" v-show="currStep == 1 &&  testPaperType == 2">
					<Row>
						<h4 style="margin-bottom:30px;float:left;">
								第二步 | 自动生成题目
							</h4>
						<div style="float:right">
							<span style="color:#ff9900" v-if="paperTestformValidate.paperType !== 'paper_random'"><Icon type="ios-information-circle-outline" />保存试卷前请先生成试卷题目</span>
							<!-- <Poptip confirm title="检测到你的选题总数和已选题目数不一致，确定保存试卷?" @on-ok="savePaperTest('paperTestformValidate')" v-if="autoTotal != selectQuestionList.length">
								<Button type="primary">完成</Button>
							</Poptip> -->
							<Button type="primary" @click="savePaperTest('paperTestformValidate')" :loading="saveLoading">完成</Button>
						</div>
					</Row>
					<PaperAutomaticGenerated 
						v-if="autoProduce" 
						ref="getParams"
						:selectQuestionList="paperQuestionList"
						:isSelfTest="paperTestformValidate.type === 'self'"
						:paperVisibility="paperTestformValidate.visibility"
						:isAdvancedExam="paperTestformValidate.advanced"
						:paperCreator="paperTestformValidate.creator"
						:paperType ='paperTestformValidate.paperType'
						:paperRandomsDetail="paperRandomsDetail"
						:opType ='opType' 
						:isOwn="isOwn"
						@changeArr="changeArr"
						@change-type="changeType"
						@has-evn="hasEnv"
						@on-change="getSelectQuestion">
					</PaperAutomaticGenerated>
				</Col>
			</Row>
		</div>
	</div>
</template>
<script>
	import selected from '@/assets/testPaper/selected.png'
	import usally from '@/mixin/usally'
	import common from './components-paper/mixin'
	import {
		createTestPaper,
		modifyTestPaper,
		queryTestPaperQuestionList
	} from '@/api/testpaper'
	import { getPaperIsUsed } from '@/api/exam'
	import encryption from '@/libs/encryption.js'
	import QuestionList from '@/components/question-list'
	import PaperManuallyGenerated from './components-paper/paper-hand-generated'
	import PaperAutomaticGenerated from './components-paper/paper-automatic-generated'
	import pageTitle from '@/mixin/pageTitle';
	import { validateName,validateName128 } from '@/libs/reg';
	export default {
		name: 'tesPaperDetail',
		components:{QuestionList,PaperManuallyGenerated,PaperAutomaticGenerated},
		mixins: [usally,common,pageTitle],
		data() {
			const validateName = (rule, value, callback) => { //验证只能填入数字
				var reg = new RegExp("^[\u4E00-\u9FA5a-zA-Z0-9_-]*$");
				//验证警戒值
				if(value) {
					if(!reg.test(value)) {
						callback(new Error('请输入中文、数字、字母、下划线、-'));
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const validateDuration = (rule,value,callback) => {
				if (!value && value !== 0) {
					callback(new Error('考试时长不能为空'));
					return
				}
				if (!Number.isInteger(value)) {
					callback(new Error('请输入整数'));
					return
				}
				if (value < 30 || value > 240) {
					callback(new Error('时长范围：30~240分钟'));
					return
				}
				callback()
            }
			let September = sessionStorage.getItem('November')
			September = JSON.parse(encryption.SelfUseDecrypt(September))
			return {
				disabledChangeType: false,
				isUsed: false,
				disabledAdvancedExam: false,
				disabledPaperType:false,
				questionTypeList: [], // 题目类型
				USER_ID: September.userId,
				USER_Name: September.nickname,
				title: '',
				currStep: 0,
				selected,
				testPaperType: 1,
				paperTestformValidate: {
					"description": "",
					"difficulty": "",
					"visibility": 'share',
					"advanced": 'false',
					"paperType": 'paper_fixed',
          "type": 'teach',
					"paperName": "",
					"totalScore": 100,
					"duration": 60,
					//			          "type":1,
					"creator": September.userId,
					"questionRelations": [],
					"paperRandoms": []
				},
				rulepaperTestValidate: {
					paperName: [{
						required: true,
						max: 128,
						message: '试卷名称长度为1-128个字符',
						trigger: 'change'
					}, {
						validator: validateName128,
						trigger: 'change'
					}],
					description: [
						{
							required: true,
							message: '不能为空',
							trigger: 'change'
						},
						{
							max: 200,
							message: '描述不得超过200个字符',
							trigger: 'change'
						}
					],
					difficulty: [{
						required: true,
						message: '不能为空',
						trigger: 'change'
					}, ],
					duration: [
                        { required: true, validator: validateDuration, trigger: 'change' },
                    ],
					totalScore: [{
						required: true,
						type: 'number',
						message: '不能为空',
						trigger: 'change'
					}, ],
					visibility: [{
						required: true,
						type: 'string',
						message: '不能为空',
						trigger: 'change'
					}, ],
					advanced: [{
						required: true,
						type: 'string',
						message: '不能为空',
						trigger: 'change'
					}],
						paperType: [{
						required: true,
						type: 'string',
						message: '不能为空',
						trigger: 'change'
					}],
					type: [{
						required: true,
						type: 'string',
						message: '不能为空',
						trigger: 'change'
					}, ],
				},
				//添加方式
				autoProduce: false,
				singleAdd: false,
				totalScore: 0, //题目总分
				autoTotal: 0, //选择总数
				paperName:'',
//				autoPreLoading: false,
				hasIllegalScore: false,
				maxHeight: 'calc(100vh - 336px)',
				reciveData: {},
				saveLoading: false,
				paperQuestionList:[],
				selectQuestionList:[],
				opType: 'create',
				paperRandoms: [],
				paperRandomsDetail:[],
				topicTypeList:{}
			}
		},
		computed: {
			isOwn: function() {
				return this.USER_ID == this.paperTestformValidate.creator || !this.paperTestformValidate.creator
			}
		},
		filters: {
			
		},
		watch: {
			'paperTestformValidate.advanced':{
				handler (val) {
					this.disabledPaperType = eval(val.toLowerCase()); // 把字符串转义为boolean值
					this.paperTestformValidate.paperType = eval(val.toLowerCase()) && this.paperTestformValidate.paperType == 'paper_random' ? 'paper_fixed' : this.paperTestformValidate.paperType 
					this.paperTestformValidate.type = eval(val.toLowerCase()) ? 'teach' : this.paperTestformValidate.type
				}
			},
			'paperTestformValidate.paperType': {
				handler (val) {
					if (val == 'paper_random') {
						this.changePaperType(2)
					} else {
						this.changePaperType(1)
					}
				}
			}
		},
		methods: {
			changeArr (params) {
				this.paperRandoms = params
				// 拿到数据，直接作为参数
				console.log('🚀this.paperRandoms', this.paperRandoms)
			},
			savePaperTest (name) {
				if (this.paperTestformValidate.paperType == 'paper_random') {
					const allValuesNonNegative = Object.values(this.topicTypeList).every(value => value > 0);
					if(!allValuesNonNegative){
						this.$Message.warning('每个题型至少选择一道题');
						return;
					}
					this.$refs.getParams.getParams()
				}

				if (this.autoTotal == 0 && this.paperTestformValidate.paperType == 'paper_random') {
					this.$Message.warning('请选择题目');
					return;
				}
				let _this = this;
				this.saveLoading = true;
				if (this.paperTestformValidate.advanced === 'true') {
					if (!this.selectQuestionList.some(item => [1, '1', 'true'].includes(item.needEnv))) {
						this.saveLoading = false;
						this.$Message.warning('进阶考试，必须包含有环境的题目');
						return;
					}
				}
				if(this.hasIllegalScore) {
					this.saveLoading = false;
					this.$Message.warning('单个题目的分值只能为整数或*.5,请修改题目数量或分值');
					return;
				}
				_this.paperTestformValidate.totalScore = this.totalScore;
				if(_this.selectQuestionList.length == 0 && this.paperTestformValidate.paperType != 'paper_random') {
					this.$Message.warning('请选择题目');
					this.saveLoading = false;
					return;
				}
				_this.$refs[name].validate((valid) => {
					if(valid) {
						if (_this.paperTestformValidate.paperType == 'paper_random') {
							this.paperRandoms.forEach(item => {
								if (item.type == 'qa' && item.count > 0) {
									this.paperTestformValidate.questionType = 'no_env_no_flag'
								}
							})
							_this.paperTestformValidate.paperRandoms = this.paperRandoms
						} else {
							_this.paperTestformValidate.questionRelations = _this.selectQuestionList.map((question, index) => {
								// if (question.matchMode == '3') {
								// 	this.paperTestformValidate.questionType = 'no_env_no_flag'
								// }
								return {
									"id": '',
									"type": this.transferQuestionModeCodeToPapertype(question.modeCode),
									"paperId": "",
									"score": question.score,
									"questionId": question.id,
									"no": index + 1
								}
							})
							// 新建、修改没有问答题，标识问题
							let matchModeList = this.selectQuestionList.filter(item => item.matchMode == '3')
							if (matchModeList && matchModeList.length > 0) {
								this.paperTestformValidate.questionType = 'no_env_no_flag'
							} else {
								this.paperTestformValidate.questionType = ''
							}
						}
						let param = JSON.parse(JSON.stringify(_this.paperTestformValidate))
						param.advanced = param.advanced === 'true' // 需要把字符串转义为boolean值
						if(_this.opType === 'create') {
							createTestPaper(param).then(data => {
								if(data.code === 1) {
									_this.$Message.info('创建试卷成功！');
									_this.returnTestPaper(1);
								} else {
									_this.$Message.error(data.message);
								}
								this.saveLoading = false;
							}).catch(error => {
								this.saveLoading = false;
							})
						} else if(_this.opType == 'modify') {
							modifyTestPaper(_this.paperTestformValidate,_this.paperTestformValidate.paperId).then(data => {
								if(data.code === 1) {
									_this.$Message.info('修改试卷成功！');
									_this.returnTestPaper(1);
								} else {
									_this.$Message.error(data.message);
								}
								this.saveLoading = false;
							}).catch(error => {
								this.saveLoading = false;
							})
						}
					} else {
						_this.$Message.error('表单输入有误，请查看表单信息或检查题目输入是否完整，如不需要，请删除输入不完整的题目!');
						_this.saveLoading = false;
					}
				}).catch(error => {
					console.log(error);
				})
			},
			//获取总分值
			getTotalScore() {
				this.totalScore = 0;
				let scoreList = this.selectQuestionList.map(question => question.score)
				this.totalScore = scoreList.reduce((count, v) => count + v, 0)
			},
			changePaperType(type) { //切换组卷方式的回调
				this.sfChangeType(type); //判断是否切换题目添加方式
				this.testPaperType = type;
			},
			returnTestPaper(page) {
				this.$router.push({
					name: 'testPaper',
					params: {
						page: page
					}
				})
			},
			sfChangeType(type) { //是否改变题目添加方式 切换组卷方式之后回调里的回调
				this.isChangePaperType = false;
				if((this.testPaperType == 2 && type == 1) || (this.testPaperType == 1 && type == 2)) { 
					this.isChangePaperType = true;
					this.selectQuestionList = [];
				} 
			},
			singleAddQuestion(status, type) {
				if(status) {
					if(this.testPaperType == 1) { //单个添加
						this.$refs['paperTestformValidate'].validate((valid) => {
							if(valid) {
								this.currStep = 1;
								this.singleAdd = true;
								this.autoProduce = false;
								if(this.opType == 'modify') { //如果是修改试卷
									let list = this.paperTestformValidate.questionRelations.filter(question => question.name || question.description);
									list.forEach(question => {
										if(!question.name){
											question.name = question.description;
										}
										question.modeCode = this.transferPapertypeToQuestionModeCode(question.questionType);
										let ques = this.showQuestionList.filter(item => question.id == item.id);
										if(ques.length > 0) {
											this.$set(ques[0], '_checked', true);
											this.$set(ques[0], 'score', question.score);
										}
									});
									this.selectQuestionList = list;
								} else { //如果是添加
									
								}
								this.getTotalScore();
							}
						})
					} else {
						this.$refs['paperTestformValidate'].validate((valid) => {
							if(valid) {
								this.currStep = 1;
								this.singleAdd = false;
								this.autoProduce = true;
							}
						})
					}
				} else {
					this.singleAdd = false;
					this.autoProduce = false;
					this.showForm = true;
				}
			},
			getSelectQuestion(selectQuestionList,totalScore,autoTotal,item,obj){
				this.topicTypeList = obj
				this.selectQuestionList = selectQuestionList;
				this.totalScore = totalScore;
				this.autoTotal = autoTotal;
			},
			changeType(val) {
				this.disabledChangeType = val
			},
			hasEnv(val) {
				this.disabledAdvancedExam = val
			},
			noFilter(val) {
				let num = val + 1
				let str;
				switch(num) {
					case 1:
						str = 'A';
						break;
					case 2:
						str = 'B';
						break;
					case 3:
						str = 'C';
						break;
					case 4:
						str = 'D';
						break;
					case 5:
						str = 'E';
						break;
					case 6:
						str = 'F';
						break;
					case 7:
						str = 'G';
						break;
					case 8:
						str = 'H';
						break;
					case 9:
						str = 'I';
						break;
					case 10:
						str = 'J';
						break;
					case 11:
						str = 'K';
						break;
					case 12:
						str = 'L';
						break;
					default:
						str = '';
						break;
				}
				return str;
			},
			getPaperIsUsed() {
				return new Promise(resolve => {
					getPaperIsUsed(this.$route.query.id).then(({ code, message, data }) => {
						if (code !== 1) {
							this.$Message.warning(message)
							resolve(false)
							return
						}
						resolve(data)
					}).catch(() => {
						resolve(false)
					})
				})
			}
		},
		mounted() {
			this.testPaperType = 1;
			if(!this.$route.query.id) {
				this.opType = 'create';
				this.title = '创建试卷';
				this.$store.commit('addBreadItem', { name: this.title });
			} else {
				this.opType = 'modify';
				this.title = '修改试卷';
				queryTestPaperQuestionList({paperId:this.$route.query.id}).then(async res=>{
					if(res.code==1){
						this.paperName = res.data.paperName;
						this.$store.commit('addBreadItem', { name: this.paperName });
						this.paperTestformValidate = res.data;
						this.paperTestformValidate.advanced = this.paperTestformValidate.advanced ? 'true' : 'false'
						let questionList = res.data.paperQuestion;
						questionList.sort(function(a, b){return a.orderNo-b.orderNo});
						questionList.forEach(item => {
							item.modeCode = this.transferPapertypeToQuestionModeCode(item.questionType);
							item.explanation = item.description;
							// if(item.questionType == 3) { //如果是判断题
							// 	this.$set(item, 'answers', this.generateTorFQuestionsAnswer(item));
							// }
							item.answers.forEach((subAnswer, index) => {
								if(subAnswer.description.indexOf('】') == 2 || subAnswer.description.indexOf(']') == 2) {
									subAnswer.description = subAnswer.description.slice(3);
								}
								if (['1', '2'].includes(item.modeCode)) {
									subAnswer.description = `[${this.noFilter(index)}]${subAnswer.description}`
								}
							})
						})
						this.paperTestformValidate.questionRelations = questionList;
						this.paperQuestionList = questionList;
						this.disabledChangeType = questionList.some(item => item.flagType === '3')
						this.disabledAdvancedExam = questionList.some(item => item.needEnv === '1')
						await this.getPaperIsUsed().then(res => {
							this.isUsed = !res
						})
						this.paperRandomsDetail = res.data.paperRandoms
					} else {
						this.$Message.warning(res.message)
					}
				})
			}
		},
		beforeRouteLeave(to, from, next) {
			if(to.path === '/testPaper') {
				//to.query.page = this.$route.query.page
				next()
			} else {
				//跳转至非课件页面，清空存储的查询条件
				sessionStorage.removeItem("queryObj");
				next()
			}
		},
		created() {

		},
	}
</script>
<style scoped>
	.configClass {
		line-height: 32px;
		/*border: 1px solid #eee;*/
		border-top: none;
	}
	
	.configClass .ivu-btn-default {
		border-color: #999;
		color: #999;
	}
	
	ul {
		list-style: none;
	}
	
	.preQuestion h4,
	.preQuestion p {
		word-break: break-all;
	}
	
	.more {
		width: 140px;
		height: 40px;
		line-height: 40px;
		color: #fff;
		text-align: center;
		background: #bbb;
		margin: 10px auto;
		cursor: pointer;
	}
	
	.questionList .ivu-tag {
		padding: 0 4px;
	}
	
	.questionList .ivu-divider-horizontal {
		margin: 12px 0;
	}
	
	.questionList .ivu-checkbox+span,
	.ivu-checkbox-wrapper+span {
		margin-right: 0px;
	}
	
	#selQ .ivu-card-head .ivu-tag {
		margin: 0px;
	}
	#formtitle {
		overflow: auto;
		max-height: calc(100% - 54px);
		margin-bottom: 20px;
	}
	.pageWrap {
		background: var(--card-body-bgcolor);
		height: calc(100vh - 111px);
		min-height: 620px;
		border-radius: 10px;
	}

	.pageWrap>.content {
		height: calc(100% - 116px);
	}
	
	.pageWrap>.content>.content-col {
		height: 100%;
		overflow: auto;
	}
	.pageWrap>.content>.content-col /deep/ .ivu-form {
		height: calc(100% - 48px);
	}

	.pageHeader {
		padding: 20px 20px 0 20px;
	}
	
	.pageHeader .title {
		float: left;
		font-size: 18px;
	}
	
	.fixedHeightTable {
		margin: 20px 20px 0 20px;
	}

	.test-paper-detail /deep/ .ivu-tooltip {
		padding: 0 5px;
	}
</style>
<style>
	/*.ivu-table-body{
        max-height :calc(100vh - 228px);
        overflow:hidden auto;
    }*/
	#testPaper .fixedHeightTable .ivu-table-body {
		max-height: calc(100vh - 345px);
		overflow: hidden auto;
		overscroll-behavior: contain;
	}
	
	#allQ.ivu-card {
		border-radius: 10px 0 0 10px;
	}
	
	#selQ.ivu-card {
		border-radius: 0 10px 10px 0;
	}
	
	#allQ .ivu-card-head {
		/* background: #f5f8ff; */
		border-radius: 10px 0 0 0;
		height: 50px;
	}
	
	#selQ .ivu-card-head {
		/* background: #f5f8ff; */
		border-radius: 0 10px 0 0;
		height: 50px;
	}
	
	#allQ .ivu-card-body,
	#selQ .ivu-card-body {
		height: calc(100vh - 380px);
		overflow-y: auto;
		word-break: break-all;
	}
	
	#selQ .ivu-card-body {
		border-radius: 0 0 0 10px;
	}
	
	#allQ .ivu-card-body {
		/*background: rgb(243, 246, 251);*/
		border-radius: 0 0 10px 0;
	}
	
	#selQ .ivu-tooltip-arrow {
		border-bottom-color: #bfbfbf;
	}
	
	#selQ .ivu-tooltip-inner {
		padding: 4px 6px;
		background-color: #bfbfbf;
		min-height: auto;
		cursor: pointer;
	}
	
	.up {
		display: inline-block;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		background: url("../../../assets/testPaper/up.png") no-repeat;
	}
	
	.up:hover {
		background: url("../../../assets/testPaper/up_check.png") no-repeat;
	}
	
	.down {
		display: inline-block;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		background: url("../../../assets/testPaper/down.png") no-repeat;
	}
	
	.down:hover {
		background: url("../../../assets/testPaper/down_check.png") no-repeat;
	}
	
	.remove {
		display: inline-block;
		width: 15px;
		height: 15px;
		vertical-align: middle;
		background: url("../../../assets/testPaper/remove.png") no-repeat;
	}
	
	.remove:hover {
		background: url("../../../assets/testPaper/remove_check.png") no-repeat;
	}
	
	.ivu-card-head .clear span {
		display: inline-block;
		width: 17px;
		height: 19px;
		margin-right: 5px;
		vertical-align: middle;
		background: url("../../../assets/testPaper/clear.png") no-repeat;
	}
	
	.ivu-card-head .clear:hover {
		color: #2d8cf0;
	}
	
	.ivu-card-head .clear:hover span {
		background: url("../../../assets/testPaper/clear_check.png") no-repeat;
	}
</style>